<script setup lang="ts">
import AsideView from '@/components/main/MainLeftMenu.vue'
import { reactive, toRefs } from 'vue'
const state = reactive({
  fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
  url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
})

const { fits, url } = toRefs(state)
</script>

<template>
    <div class="common-layout">
      <el-container>
        <!-- 左侧收缩 -->
        <AsideView></AsideView>
        <el-container>
          <el-header>
            <div class="demo-fit">
              <div class="block">
                <el-avatar shape="circle" :size="50" :src="url" />
              </div>
            </div>
         </el-header>
          <RouterView></RouterView>
          <el-footer >本系统用户出自工作室2C203,用户教学项目</el-footer>
        </el-container>
      </el-container>
    </div>
  </template>

  <style scoped>
  .demo-fit {
  display: flex;
  text-align: center;
  /* justify-content: space-between; */
  justify-content: right;
  }
  .demo-fit .block {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
  }
  </style>